<!DOCTYPE html>
<html lang="zh-CN">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>确认支付</title>
    <link rel="stylesheet" type="text/css" href="/shop/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/zhifu.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/loading.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/shop/js/rem.js"></script>
    <script src="/shop/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        $(window).load(function () {

            $(".loading").addClass("loader-chanage");
            $(".loading").fadeOut(300);


            var user = JSON.parse(sessionStorage.getItem("user"));


            // 从订单页面未支付状态跳转到支付界面的
            // 先获取地址栏上的id
            var id = getParams().id;

            if (id) {
                // 如果 id 有值说明是从订单页面跳转到支付页面的
                // 发送请求查询用户对应的为兑换的订单
                $.get("/orders/" + id, function (data) {
                    sessionStorage.setItem("orderId", JSON.stringify(data.id));
                    $("#orderNumber").html("您的订单号：" + data.orderNumber);
                    $("#points").html("应付积分：<span>" + data.points + "</span>");
                });

            } else {
                // 从购物车兑换商品后直接跳转到支付界面的
                $.get("/orders/" + user.id + "/orders", {status: 1}, function (data) {
                    var order = data[0];
                    if (order) {
                        sessionStorage.setItem("orderId", JSON.stringify(order.id));
                        $("#orderNumber").html("您的订单号：" + order.orderNumber);
                        $("#points").html("应付积分：<span>" + order.points + "</span>");
                    }
                });
            }
        });


        $(function () {
            //计算内容上下padding
            reContPadding({main: "#main", header: "#header", footer: "#footer"});

            function reContPadding(o) {
                var main = o.main || "#main",
                    header = o.header || null,
                    footer = o.footer || null;
                var cont_pt = $(header).outerHeight(true),
                    cont_pb = $(footer).outerHeight(true);
                $(main).css({paddingTop: cont_pt, paddingBottom: cont_pb});
            }
        });


        // 支付订单
        function payOrder() {
            // 发送请求验证用户的密码是否正确
            // 获取用户的密码
            var password = $("#password").val();
            // 获取用户信息
            var user = JSON.parse(sessionStorage.getItem("user"));
            if (password) {
                // 发送异步请求验证用户密码信息
                $.ajax({
                    url: "/users/orders",
                    type: "POST",
                    data: {userId:user.id,password: password, email: user.email},
                    success: function (data) {
                        if (data.success) {
                            // 下单
                            // 获取订单id
                            var orderId = parseInt(sessionStorage.getItem("orderId"));
                            $.ajax({
                                url: "/orders",
                                type: "POST",
                                data: {orderId: orderId, _method: "PUT"},
                                success: function (data) {
                                    if (data.success) {
                                        $(document).dialog({
                                            type: "confirm",
                                            titleShow: false,
                                            content: '兑换成功',
                                            buttons: [
                                                {
                                                    name: '跳转会员中心查看订单',
                                                    callback: function () {
                                                        location.href = "/mine/center.html";
                                                    }
                                                }
                                            ]
                                        });
                                    }
                                }
                            });
                        } else {
                            // 提示密码错误
                            $(document).dialog({
                                autoClose: 2500,
                                content: '密码错误, 请重新输入'
                            });
                        }
                    }
                })
            } else {
                // 提醒用户输入密码
                $(document).dialog({
                    autoClose: 2500,
                    content: '请输入密码'
                });
            }


        }

        // 先下单, 稍后支付
        function waitPay() {
            window.location.href = "/mine/center.html";
        }

        // 取消订单
        function abolishPay() {
            // 获取订单id
            var orderId = parseInt(sessionStorage.getItem("orderId"));
            // 发送请求将订单状态该为取消状态
            $.ajax({
                url: "/orders/" + orderId,
                type: "DELETE",
                success: function () {
                    window.location.href = "/mine/center.html";
                }
            });
        }

    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<header class="mui-bar mui-bar-nav report-header box-s" id="header">
    <a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui fl"></i></a>
    <p>确认支付</p>
</header>
<div id="main" class="mui-clearfix contaniner sorder">
    <div class="warning clearfloat box-s">
        提示：请在24小时内完成在线支付，逾期将视为订单无效
    </div>
    <div class="odernum clearfloat">
        <ul>
            <li id="orderNumber"></li>
            <li id="points"></li>
        </ul>
    </div>
    <div class="pay-method clearfloat">
        <ul>
            <li>
                <div style="height: 1rem">

                    <form method="post" action="">
                        <label>请输入支付密码：</label>
                        <input type="password" name="password" id="password" placeholder="请输入密码">
                    </form>
                </div>
            </li>
        </ul>
    </div>

    <a role="button" onclick="payOrder()" class="address-add fl">
        确认支付
    </a>

    <a role="button" onclick="waitPay()" class="address-add fl">
        稍后支付
    </a>

    <a role="button" onclick="abolishPay()" class="address-add fl">
        取消订单
    </a>
</div>
</body>
</html>
